/**
 * 付款单
 */
import * as React from 'react'
import { Card, Form, Row, Col, Table, message } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, DescriptionList, Description } from '../../components'
import '../../assets/style/TableList.less'
import  * as style from  '../order/AdvancedProfile.less'
import { ONE_PHASE_API, get } from '../../service/api'
export interface State {
  formValues: string
}
@Authentication
class PaymentOrderDetail extends React.Component<any, State> {
  
  state = {
    formValues: ''
  }
  componentDidMount () {
    this.search({}, {})
  }
  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: ''
    })
    this.search({}, {})
  }
  
  /**
   * 调用查询方法
   */
  search (param: any, page: any) {
    const { list, record } = this.props
    Object.assign(param, { v_sheetid: record.sheetid })
    list(param, page)
  }
  handleConfrimOrder = () => {
    const { record, history } = this.props
    get(ONE_PHASE_API, {
      appid: 'UPPAYMENTCK',
      v_sheetid: record.sheetid
    }).then((res: any) => {
      if (res.ErrorCode == '1') {
        message.success('操作成功！')
        history.goBack()
      }else {
        message.error(res.ErrorMsg)
      }
    })
  }
  render () {
    const { loading, data, head, record } = this.props
    // const action = (
    //   <React.Fragment>
    //     <Button type="primary" onClick={this.handleConfrimOrder}>确认</Button>
    //   </React.Fragment>
    // );
    
    const extra = (
      <Row>
        <Col xs={24} sm={12}>
          <div className={style.textSecondary}>状态</div>
          <div className={style.heading}>{head.status}</div>
        </Col>
        <Col xs={24} sm={12}>
          <div className={style.textSecondary}>确认金额</div>
          <div className={style.heading}>¥ {head.payamt}</div>
        </Col>
      </Row>
    )
    const description = (
      <DescriptionList title="" className="headerList" size="small" col={2}>
        <Description term="创建人">{head.editor}</Description>
        <Description term="发票确认人">{head.fpchecker}</Description>
        <Description term="审核时间">{head.checkdate}</Description>
        <Description term="发票确认时间">{head.fpcheckdate}</Description>
        <Description term="供应商确认状态">{head.status}</Description>
        <Description term="发票确认状态">{head.fpstatus}</Description>
        <Description term="税额">{head.taxvalue}</Description>
        <Description term="费用金额">{head.chargeamt}</Description>
        <Description term="不含税金额">{head.payableamt}</Description>
      </DescriptionList>
    )
    const columns: any [] = [
      {
        title: '业务单号',
        dataIndex: 'docno',
      },
      {
        title: '引用单号',
        dataIndex: 'refsheetid',
      },
      {
        title: '单据类型',
        dataIndex: 'doctype'
      },
      {
        title: '发生日期',
        dataIndex: 'docdate'
      },
      {
        title: '应结日期',
        dataIndex: 'duedate'
      },
      {
        title: '含税额',
        dataIndex: 'ounpaidvalue',
      },
      {
        title: '不含税额',
        dataIndex: 'docamt'
      },
      {
        title: '税额',
        dataIndex: 'taxvalue'
      },
      {
        title: '销售额',
        dataIndex: 'saleamt'
      },
      {
        title: '说明',
        dataIndex: 'noteremark'
      }
    ]
    let totalOne = 0 
    let totalTwo = 0
    data.list.map((row: any) => {
      totalOne+=row.taxvalue
      totalTwo+=row.docamt
    })
    const getFooter = (): any => <ul className={style.footUl}>
      <li className={style.footLi}>合计：</li>
      <li className={style.footLi}><span>税额：</span>{totalOne}</li>
      <li className={style.footLi}><span>不含税额：</span>{totalTwo}</li>
    </ul>
    return (
      <PageHeaderLayout
      title={<span>单号：{record.sheetid}</span>}
      logo={
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
      }
      // action={action}
      content={description}
      extraContent={extra}>
        <Card bordered={false}>
          <div className="tableList">
            <Table
              rowKey = "docno"
              loading={loading}
              dataSource={data.list}
              columns={columns}
              footer={getFooter}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(PaymentOrderDetail)